import React, { useEffect, useState } from 'react';
import { Box, Typography, Button, Avatar, Grid, Paper } from '@mui/material';
import { useLocation } from 'react-router-dom';
import { useNavigate } from 'react-router-dom'
// import RadarChart from './RadarChart'; // 你可以用echarts-for-react或recharts等实现雷达图，这里先占位
// import ReactECharts from 'echarts-for-react'; // 移除echarts导入


export default function AnalysisResultPage() {
  const location = useLocation();
  const { pifuresult } = location.state as any; // 接收传递的数据
  const router = useNavigate()
  const [skinProblemsData, setSkinProblemsData] = useState<Array<{ label: string; score: number }>>([]);
  
  // 移除conclusionData状态
  // const [conclusionData, setConclusionData] = useState<Array<{ name: string; score: number }>>([]);

  useEffect(() => {
    if (pifuresult && pifuresult.skin_data) {
      const transformedSkinData = pifuresult.skin_data.map((item: any) => {
        let label = '';
        switch (item.skin) {
          case 1: label = '毛孔'; break;
          case 2: label = '皱纹'; break;
          case 3: label = '色斑'; break;
          case 4: label = '痤疮'; break;
          case 5: label = '黑眼圈'; break;
          case 6: label = 'U区油分'; break; // 根据API文档，6是U区油分
          case 7: label = 'T区油分'; break; // 根据API文档，7是T区油分
          case 8: label = '敏感'; break;
          case 9: label = '黑头'; break;
          case 10: label = '肤色'; break;
          default: label = '';
        }
        return {
          label: label,
          score: item.score,
        };
      });
      // 过滤掉没有标签的数据，并确保顺序稳定
      setSkinProblemsData(transformedSkinData.filter(item => item.label !== ''));
    }


  }, [pifuresult]);

  // 计算分数标签的环绕位置 (将标签中心定位到圆周上)
  const getCircularPosition = (index: number, total: number, radius: number, centerX: number, centerY: number) => {
    const angle = (360 / total) * index - 90; // Start from top (-90 degrees)
    const radians = (angle * Math.PI) / 180;
    const x = centerX + radius * Math.cos(radians);
    const y = centerY + radius * Math.sin(radians);
    return { x, y };
  };

  // 图片容器的中心点和半径 (根据图片大小和容器大小估算)
  const imageSize = 200; // 图片的直径
  const containerHeight = 400; // 容器高度
  const centerX = 375 / 2; // 容器宽度的一半 (Assuming container width is 375px based on parent Box)
  const centerY = containerHeight / 2; // 容器高度的一半
  const radius = (imageSize / 2) + 80; // 在图片半径基础上增加更大的偏移量，确保不重叠且有间隔
  const gotopage = () => {
    router('/app/analy')
  }
  const gohome = () => {
    router('/app/shou')
  }
  return (
    <Box sx={{ background: '#8ee0c2', minHeight: '100vh', pb: 4, overflow: 'hidden' }}> {/* 增加overflow: hidden */}
      {/* 头部 */}
      <Box sx={{ width: 375, mx: 'auto', pt: 2, position: 'relative' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 2 }}>
          <Typography sx={{ color: '#fff', fontWeight: 500 }} onClick={() => {gohome()}}>
            首页
          </Typography>
          <Box>
            <Button variant="contained" size="small" sx={{ mr: 1, bgcolor: '#fff', color: '#8ee0c2', minWidth: 0, px: 2 }} onClick={() => {gotopage()}}>再测</Button>
          </Box>
        </Box>
        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mt: 2 }}>
          {/* TODO: Use actual user avatar if available in data */}
          <Avatar sx={{ width: 80, height: 80, bgcolor: '#fff' }} src="">
            <img src="https://cdn-icons-png.flaticon.com/512/147/147144.png" alt="avatar" width={80} height={80} />
          </Avatar>
          {/* TODO: Use actual user name and id if available in data */}
          <Typography sx={{ color: '#fff', fontWeight: 600, fontSize: 22, mt: 1 }}>Tulip</Typography>
          <Typography sx={{ color: '#fff', fontSize: 14, mt: 0.5 }}>NO.501699</Typography>
          {/* TODO: Use actual analysis date and time if available in data */}
          <Typography sx={{ color: '#fff', fontSize: 14, mt: 0.5 }}>2025-05-15 11:47</Typography>
        </Box>
        {/* 皮肤问题分数环绕图片 */}
        <Box sx={{ position: 'relative', mt: 2, mb: 2, height: containerHeight, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          {/* 中间显示拍摄的图片 */}
          {pifuresult?.analyse?.image && (
            <Avatar
              src={pifuresult.analyse.image}
              sx={{
                width: imageSize,
                height: imageSize,
                border: '4px solid #fff',
                zIndex: 1,
              }}
              variant="circular"
            />
          )}

          {/* 环绕分数 */}
          {skinProblemsData.map((item, idx) => {
            const position = getCircularPosition(idx, skinProblemsData.length, radius, centerX, centerY);
            return (
              <Paper
                key={item.label}
                elevation={3}
                sx={{
                  position: 'absolute',
                  left: position.x,
                  top: position.y,
                  px: 2.5,
                  py: 0.5,
                  minWidth: 70,
                  maxWidth: 120,
                  borderRadius: 2,
                  textAlign: 'center',
                  bgcolor: '#fff',
                  zIndex: 3,
                  transform: 'translate(-50%, -50%)',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  boxSizing: 'border-box'
                }}
              >
                <Typography sx={{ color: '#8ee0c2', fontWeight: 600, fontSize: 15, whiteSpace: 'nowrap' }}>
                  {item.label} <span style={{ color: '#f36', fontWeight: 700 }}>{item.score}分</span>
                </Typography>
              </Paper>
            );
          })}
        </Box>
        {/* 肌肤得分和年龄 */}
        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', mb: 2, mt: 4 }}> {/* 增加顶部外边距 */}
          <Box sx={{ textAlign: 'center', mr: 6 }}> {/* 调整间距 */}
            <Typography sx={{ fontWeight: 600, fontSize: 20 }}>肌肤得分</Typography>
            <Typography sx={{ color: '#222', fontWeight: 700, fontSize: 28, mt: 1 }}>{pifuresult?.skin_score}</Typography>
          </Box>
          <Box sx={{ textAlign: 'center' }}>
            <Typography sx={{ fontWeight: 600, fontSize: 20 }}>肌肤年龄</Typography>
            <Typography sx={{ color: '#222', fontWeight: 700, fontSize: 28, mt: 1 }}>{pifuresult?.skin_age}</Typography>
          </Box>
        </Box>
        {pifuresult?.skin_content && (
          <Box sx={{ mt: 4, px: 2, width: '100%', textAlign: 'center' }}>
            <Typography
              sx={{
                color: '#7356f1',
                fontSize: 18,
                fontWeight: 600,
                mb: 1.5,
                letterSpacing: 1,
              }}
            >
              肌肤分析结论
            </Typography>
            <Typography
              sx={{
                color: '#333',
                fontSize: 16,
                whiteSpace: 'pre-line',
                lineHeight: 2,
                wordBreak: 'break-all',
                maxWidth: 600,
                margin: '0 auto',
                background: 'none',
                boxShadow: 'none',
                borderRadius: 0,
                px: 0,
                py: 0,
              }}
            >
              {pifuresult.skin_content}
            </Typography>
          </Box>
        )}
      </Box>
    </Box>
  );
} 